<template>
	   <div class="registered">
	 	   <div class="head">
	 	   	     <div class="logo">
	 	   	     	 <img src="../../assets/img/logo.png" width="72px" height="42px"/>
	 	   	     </div>
	 	   	      <form action="" method="post" class="form">
	 	   	    	<div class="gologin">
	 	   	    		<a href="">返回登录</a>
	 	   	    	</div>

	 	   	    	 <div class="form-reg">
	 	   	    	 	<div class="one">
	 	   	    	 		<h3 @click="changeLoginType" >1.验证手机号</h3>
	 	   	    	 	</div>

	 	   	    	 	<div class="back-one" >
	 	   	    	 		<div class="reg">
	 	   	    	 		<input name="" type="number" class="input phone" v-model="mobile" placeholder=" 请输入注册是使用的手机号">

	 	   	    	 		<div class="verify">
				               <input name="" type="number" v-model="verification" class="input possword" placeholder=" 短信验证码">
	 	   	    	 		   <a href="javascript:;" @click='getVerification'>获取验证码</a>
				            </div>
				            <input name="" type="text" v-model="posswords" class="input phone" placeholder=" 请输入要设置的密码">
	 	   	    	 	 </div>
	 	   	    	 	 <button @click='correctionPasswod'>找回密码</button>
	 	   	    	 </div>

	 	   	    	 </div>
	 	   	    </form>
	 	   </div>
	 	   <div class="floot">
	 	   </div>
	 </div>


</template>

<script>
	 export default {
    name: 'indes',
    data () {
      return {
        mobile:'',
        verification:'',
        posswords:''
      }
    },
    methods: {
      changeLoginType () {
        this.show = !this.show
        this.pShow = !this.pShow
        this.isActive = !this.isActive
      },
       getVerification () {
      	if(this.mobile.length != 11){
      		this.open3()
      		return
      	}
        let params = {
          "mobile": this.mobile,
          "type":'udp'
        }
        this.$post('/user/sendMessage', params).then(res => {
          console.log(res)
        })
      },
       open3() {
        this.$message({
          message: '请输入正确的手机号/验证码',
          type: 'warning'
        });
      },
      correctionPasswod(){
      	let params = {
           "code": this.verification,
           "mobile": this.mobile,
           "password": this.passwords
        }
        this.$post('/user//user/updatePassword', params).then(res => {
          console.log(res)
          window.location.href = '/#/logins/'
        })
      }
    }
  }
</script>

<style scoped>
	.registered {
	width: 100%;
	height: 600px;
	background-color: #EFF8FF;
}

.head {
	width: 60%;
	height: 50%;
	padding-top: 90px;
	margin: 0 auto;
}
.active{
   color: #007FE0;
}
.floot {
	width: 100%;
	height: 50%;
	background-color: #64ABE1;
}

 .head  .logo {
	width: 78px;
	height: 42px;
	margin-bottom: 18px;
}
	  .form {
	width: 60%;
	height: 500px;
	background-color: #FFFFFF;
	margin: 0 auto;
	position: absolute;
	left: 20%;
}

.form .gologin {
	margin: 18px 60px 0 30px;
}

.gologin a {

	font-size: 14px;
	color: #007FE0;
}

.form .form-reg {
	width: 60%;
	height: 400px;
	margin: 42px auto 60px auto;
}

.form-reg .one{
	width: 100%;
	display: inline-block;
}
.form-reg h3 {
	text-align: center;
	padding-bottom: 10px;

    font-size: 14px;
    color: #007FE0;
}
.form-reg button{
	display: block;
	width: 80%;
	height: 42px;
	line-height: 42px;
	text-align: center;
	background-color: #42ADFF;
    border: 0 solid #979797;
    border-radius: 4px;
    margin: 42px auto 0 auto;

    font-size: 16px;
    color: #FFFFFF;
}
.reg .possword{
	height: 60px;
	width: 80%;
	border: 0px;
	outline:none;
	margin: 0;
	display: inline-block;
}
 .reg a{

font-size: 12px;
color: #007FE0;
}
.input{
	display: block;
	margin:0 auto;
	height: 60px;
	width: 100%;
	border: 0px;
	outline:none;
	border-bottom: 1px solid #DADADA;

    font-size: 16px;
    color: #9B9B9B;

}
.reg .verify{
	border-bottom: 1px solid #DADADA;
}
.reg .verify input{
	height: 60px;
	width: 80%;
	border: 0px;
	outline:none;
}
.imgcode{
	width: 20%;
}
</style>
